import React, { useState, useEffect } from 'react';
import { Form, Input, Select, Button, Switch, message, InputNumber } from 'antd';
import { request } from 'umi';

const { Option } = Select;
const { TextArea } = Input;

/**
 * 权限表单组件
 * @param {Object} props
 * @param {Object} props.initialValues - 初始值
 * @param {Function} props.onSubmit - 提交回调
 * @param {Function} props.onCancel - 取消回调
 */
const PermissionForm = ({ initialValues, onSubmit, onCancel }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    console.log('PermissionForm initialValues', initialValues);
    // 如果有初始值，设置表单字段值
    if (initialValues) {
      form.setFieldsValue({
        name: initialValues.name,
        description: initialValues.description,
        module: initialValues.module,
        type: initialValues.type,
        identifier: initialValues.identifier,
        method: initialValues.method,
        parent_id: initialValues.parent_id,
        sort: initialValues.sort,
      });
    }
  }, [initialValues, form]);

  // 处理表单提交
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);
      
      // 调用父组件的提交方法
      onSubmit(values);
    } catch (error) {
      console.error('表单验证失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 处理取消
  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Form
      form={form}
      layout="vertical"
      initialValues={{
        status: 1,
        type: 'api',
        sort: 0,
      }}
    >
      <Form.Item
        name="name"
        label="权限名称"
        rules={[{ required: true, message: '请输入权限名称' }]}
      >
        <Input placeholder="请输入权限名称" />
      </Form.Item>
      
      <Form.Item
        name="description"
        label="权限描述"
      >
        <TextArea placeholder="请输入权限描述" rows={3} />
      </Form.Item>
      
      <Form.Item
        name="module"
        label="所属模块"
        rules={[{ required: true, message: '请选择所属模块' }]}
      >
       <Input placeholder="请输入所属模块" />
      </Form.Item>
      
      <Form.Item
        name="identifier"
        label="权限标识符"
        rules={[{ required: true, message: '请输入权限标识符' }]}
      >
        <Input placeholder="请输入权限标识符，如：/api/v1/" />
      </Form.Item>
      
      <Form.Item
        name="type"
        label="权限类型"
        rules={[{ required: true, message: '请选择权限类型' }]}
      >
        <Select placeholder="请选择权限类型">
          <Option value="api">API接口</Option>
          <Option value="menu">菜单</Option>
          <Option value="button">按钮</Option>
        </Select>
      </Form.Item>
      
      <Form.Item
        name="method"
        label="请求方法"
        rules={[{ 
          required: form.getFieldValue('type') === 'api', 
          message: '请选择请求方法' 
        }]}
        dependencies={['type']}
      >
        <Select 
          placeholder="请选择请求方法" 
          allowClear
        >
          <Option value="GET">GET</Option>
          <Option value="POST">POST</Option>
          <Option value="PUT">PUT</Option>
          <Option value="DELETE">DELETE</Option>
          <Option value="*">所有方法</Option>
        </Select>
      </Form.Item>
      
      <Form.Item
        name="parent_id"
        label="父级权限ID"
      >
        <InputNumber placeholder="请输入父级权限ID" type="number" />
      </Form.Item>
      
      <Form.Item
        name="sort"
        label="排序"
      >
        <InputNumber placeholder="请输入排序值" type="number" />
      </Form.Item>
      
      <Form.Item
        name="status"
        label="状态"
        valuePropName="checked"
      >
        <Switch checkedChildren="启用" unCheckedChildren="禁用" />
      </Form.Item>
      
      <Form.Item>
        <Button type="primary" onClick={handleSubmit} loading={loading} style={{ marginRight: 8 }}>
          提交
        </Button>
        <Button onClick={handleCancel}>
          取消
        </Button>
      </Form.Item>
    </Form>
  );
};

export default PermissionForm;